<template>
<div class="wrapper">
  <head :backFlag="false" bgcolor="rgba(0,0,0,0)">
    <div class="leftBox" slot="left" @click="backPage">
      <text class="arricon2">&#xe603;</text>
    </div>
    <div class="inputbox" slot="center">
      <input
        autofocus
        @focus="focusInput"
        v-modal="searchVal"
        class="tips"
        placeholder="Search"
        ref="input1"
        @return="searchRet"
        return-key-type="search"
      />
    </div>
    <div class="rightBox" slot="right" @click="searchBtn">
      <text class="searchIcon iconfont">&#xe62a;</text>
    </div>
  </head> 
  <div class="bt"></div>

  <div class="pageContent">
    <div class="historyMode" v-if="pageType=='search'">
      <div class="hisTop">
        <text class="hisTit">Historical search</text>
        <text class="iconfont hisDel" @click="clearHis">&#xe6e4;</text>
      </div>
      <div class="hisItem" v-if="searchArr.length>0">
        <text
          class="itemLi"
          v-for="(item,index) in searchArr"
          :key="index"
          @click="searchRet({value:item})"
        >{{item}}</text>
      </div>
    </div>
    <scroller class="listMode" v-if="pageType=='list'">
      <div class="recontent" v-if="shopList.length>0">
        <div class="reitem" v-for="(item,index) in shopList" :key="index">
          <image
            class="goodsImg"
            :src="item.thumb"
            @click="gonext('root:app/goods/goods.js',{id:item.id})"
          />
          <view class="contentBox">
            <text class="goodsTitle2">{{item.title}}</text>
            <view class="priceInfo">
              <view class="leftInfo">
                <text class="symbol">AU$</text>
                <text class="money">{{item.price}}</text>
                <!-- <text class="reduce">80%</text> -->
                <!-- <text class="shopType">NEW</text> -->
              </view>
              <view class="leftInfo">
                <text class="iconfont shopIcon">&#xe64c;</text>
                <text class="iconfont shopIcon">&#xe634;</text>
                <text class="iconfont shopIcon">&#xe607;</text>
              </view>
            </view>
          </view>
        </div>
      </div>
      <empty
        v-if="shopList.length==0&&!isLoading"
        tips="No results found"
        img="root:img/e_seel.png"
      ></empty>
    </scroller>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
const navbar = weex.requireModule("navbar");

import asCore from "../../mixin/core";
import { getActiveList } from "../../mixin/ajax.js";
export default {
  data() {
    return {
      pageType: "search",
      amount: 0,
      shopList: [],
      searchList: "",
      searchVal: "",
      setype: "0"
    };
  },
  computed: {
    searchArr() {
      if (!this.searchList) {
        return [];
      }
      return this.searchList.split(",");
    }
  },
  mounted() {
    this.$refs.input1.focus();
  },
  methods: {
    onLoad(parmars) {
      if (parmars && parmars.parmar) {
        return false;
      }
      this.getHist(parmars);
    },
    getHist(parmars) {
      var storage = weex.requireModule("storage");
      storage.getItem("searchHist", event => {
        var value = event.data;
        if (event.result != "success") {
          value = "";
        }
        this.searchList = value;

        if (parmars) {
          if (parmars.type) {
            this.setype = parmars.type;
          }
          if (parmars.name) {
            this.searchRet({
              value: parmars.name
            });
          }
        }
      });
    },
    backPage() {
      if (this.pageType == "list") {
        this.$refs.input1.focus();
      } else {
        this.back();
      }
    },
    clearHis() {
      this.modal.confirm(
        {
          message: "Are you sure to delete all history?",
          okTitle: "Confirm",
          cancelTitle: "Cancel"
        },
        res => {
          if (res == "Confirm") {
            var storage = weex.requireModule("storage");
            storage.removeItem("searchHist", () => {
              this.getHist();
            });
          }
        }
      );
    },
    gonext(url, parmar) {
      this.push(url, parmar); 
    },
    focusInput() {
      this.pageType = "search";
    },
    searchBtn() {
      if (this.searchVal) {
        this.searchRet({ value: this.searchVal });
      } else {
        this.searchRet({ value: "Notebook" });
      }
    },
    searchRet(param) {
      let that = this;
      this.$refs.input1.blur();
      this.pageType = "list";
      this.searchVal = param.value;

      let searchHist = param.value;

      if (this.searchList) {
        searchHist = param.value + "," + this.searchList;

        if (this.searchArr.filter(item => item == param.value).length > 0) {
          searchHist = this.searchList;
        }
      }
      if (param.value) {
        var storage = weex.requireModule("storage");
        storage.setItem("searchHist", searchHist, () => {
          that.getHist();
        });
      }
      this.isLoading = true;
      getActiveList(
        {
          users_id: "",
          keywords: param.value,
          categoryid: "",
          type: this.setype, 
          page: 1,
          page_num: "10"
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) { 
            if (res.code == "200") {
              that.shopList = res.data.list;
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    } 
  }
};
</script>

<style scoped lang="less">
.wrapper {
  background-color: #ffffff;
  flex: 1;
}

.pageContent {
  flex: 1;

  width: 750px;
}
.leftBox {
  align-items: center;
  flex-direction: row;
  flex: 1;
  justify-content: center;
}
.arricon2 {
  font-size: 40px;
  font-family: iconfont;
  color: #303030;
}
.rightBox {
  align-items: center;
  flex-direction: row;
  flex: 1;

  &:active {
    background-color: #f2f2f2;
  }
}
.historyMode {
  width: 750px;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.listMode {
  width: 750px;
  background-color: #f2f2f2;
}

.hisTop {
  flex-direction: row;
  padding: 24px 32px;
  justify-content: space-between;
  align-items: center;
}

.hisItem {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 32px;
}

.itemLi {
  margin-right: 20px;
  margin-bottom: 24px;
  height: 55px;
  line-height: 55px;
  padding: 0 40px;
  background-color: #e6e6e6;
  border-radius: 55px;
  color: #666666;
}

.hisTit {
  font-size: 28px;
  color: #000000;
}

.hisDel {
  font-size: 30px;
  color: #999999;
}

.inputbox {
  overflow: hidden;
  background-color: #fff;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 40px;
  height: 58px;
  padding: 0 40px;
  margin-right: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #e1e1e1;
  /* margin-left: 32px; */
}

.iconfont {
  font-family: iconfont;
}

.bt {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #e1e1e1;
}

.searchIcon {
  font-family: iconfont;
  color: #fff;
  background-color: #303030;
  line-height: 58px;
  height: 58px;
  width: 88px;
  border-radius: 30px;
  text-align: center;
  font-size: 30px;
}

.tips {
  height: 58px;
  font-size: 28px;
  flex: 1;
}
 
.scroller {
  flex: 1;
}

.recontent {
  width: 750px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 24px 32px;
  /* background-color: #000000; */
}

.reitem {
  height: 516px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* justify-content: space-between; */
}

.goodsImg {
  width: 336px;
  height: 336px;
}

.contentBox {
  width: 336px;
  padding: 0 20px;
}

.goodsTitle {
  font-size: 20px;
  height: 56px;
  line-height: 28px;
  margin-top: 12px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2; 
}

.goodsTitle2 {
  font-size: 26px;
  height: 74px;
  line-height: 37px;
  margin-top: 16px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2; 
}

.priceInfo {
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
}

.leftInfo {
  flex-direction: row;
  align-items: flex-end;
}

.symbol {
  color: red;
  margin-bottom: 5px;
  margin-right: 5px;
}

.money {
  color: red;
  font-size: 32px;
  font-weight: bold;
  margin-right: 5px;
}

.shopIcon {
  font-size: 32px;
  margin-left: 10px;
}
</style>
